<script setup lang="ts">
defineExpose({
  name: 'SystemMessage'
})

defineProps<{
  message: string
}>()
</script>

<template>
  <!-- 系统消息 -->
  <div class="system-message-box">
    <div class="system-message">{{ message }}</div>
  </div>
</template>

<style lang="scss" scoped>
.system-message-box {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: $system-message-bottom-space;
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;

  .system-message {
    font-size: $system-message-font-size;
    color: #979797;
    padding: $system-message-box-padding;
    border-radius: $message-box-radius;
    background-color: rgba(237, 237, 237, 0.8);
    text-align: center;
    max-width: $max-width;
    letter-spacing: 0.1px;
    white-space: nowrap;
  }
}
</style>